<template>
  <div class="icons">
    <div class="icons-items" v-for="(item, index) in dataSource" :key="index">
      <img class="items-img" :src="item.icon" />
      <p class="items-title">{{item.title}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Icons",
  components: {},
  props: {},
  data() {
    return {
      // 数据源
      dataSource: [
        {
          id: "1",
          icon: require("@img/jingDongChaoShi.png"),
          title: "京东超市"
        },
        {
          id: "2",
          icon: require("@img/haiTunQuanQiu.png"),
          title: "海屯全球"
        },
        {
          id: "3",
          icon: require("@img/jingDongFuShi.png"),
          title: "京东服饰"
        },
        {
          id: "4",
          icon: require("@img/jingDongShengXian.png"),
          title: "京东生鲜"
        },
        {
          id: "5",
          icon: require("@img/jingDongDaoJia.png"),
          title: "京东到家"
        },
        {
          id: "6",
          icon: require("@img/chongZhiJiaoFei.png"),
          title: "充值缴费"
        },
        {
          id: "7",
          icon: require("@/assets/imgs/jingDongPinGou.png"),
          title: "9.9元拼"
        },
        {
          id: "8",
          icon: require("@/assets/imgs/lingJuan.png"),
          title: "领劵"
        },
        {
          id: "9",
          icon: require("@/assets/imgs/zhuanQian.png"),
          title: "赚钱"
        },
        {
          id: "10",
          icon: require("@/assets/imgs/quanBu.png"),
          title: "全部"
        }
      ]
    };
  },
  computed: {},
  methods: {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/style.scss";
@media screen and (min-width: 768px) {
  .icons {
    margin-top: px2rem(30);
  }
}
.icons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #ffffff;
  padding-bottom: px2rem(14);
  &-items {
    width: 20%;
    text-align: center;
    margin-top: px2rem(5);
    .items-img {
      width: px2rem(40);
      height: px2rem(40);
    }
    .items-title {
      font-size: $minInfoSize;
      margin-top: px2rem(10);
    }
  }
}
</style>